<template>
	<transition :enter-active-class="`animate__animated ${enter}`" :leave-active-class="`animate__animated ${leave}`">
		<router-view></router-view>
	</transition>
</template>
<script>
// import Home from "@/views/home/Home";

export default {
	components: {
		// Home
	},
	data() {
		return {
			enter: 'animate__rotateIn',
			leave: 'animate__rotateOut'
		}
	},
	created() {
		// this.enter = 'animate__rotateIn'
		// this.leave = 'animate__rotateOut'
	},
	mounted() {
		// console.log(this.$router)
		// this.$router.push("/home");
		// console.log();
	},
	// beforeRouteEnter(to, from, next) {
	// 	console.log(to)
	// 	console.log(from)
	// }
	watch: {
		$route(to, from) {
			// console.log('监听路由的变化')
			// console.log(to)
			// console.log(from)
			const toIndex = to.meta.toIndex
			const fromIndex = from.meta.toIndex
			if (toIndex > fromIndex) {
				this.enter = 'animate__rotateIn'
				this.leave = 'animate__rotateOut'
			} else {
				this.enter = 'animate__rotateOut'
				this.leave = 'animate__rotateIn'
			}
		}
	}
}
</script>

<style scoped>
div {
	width: 100%;
	height: 100%;
}
</style>
